<template>
	<view class="root">
		<view class="container">
			<view class="title">{{props.name}}</view>
			<view class="address-list">
				<view class="address-item" v-for="i in 2">
					<view class="left">默认地址</view>
					<view class="center">
						<view class="top">
							奥克斯广场
						</view>
						<view class="bottom">
							<view class="name">陈xx</view>
							<view class="phone">15838337244</view>
						</view>
					</view>
					<view class="right">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

	const  props = defineProps({
		name: {
			type: String,
			default: ''
		}
	})

</script>

<style lang="scss" scoped>

	.root {
		.container {
			border: 1rpx solid #efeff5;
			border-radius: 30rpx;
			box-shadow: 0 0 2rpx black;
			padding-left: 10rpx;
			padding-top: 10rpx;
			.title {
				font-weight: 700;
			}
			.address-list {
				padding-left: 20rpx;
				padding-right: 40rpx;
				
				.address-item {
					position: relative;
					display: grid;
					grid-template-columns: 150rpx 1fr 30rpx;
					align-items: center;
					height: 110rpx;
					&::after {
						position: absolute;
						bottom: 0;
						display: block;
						content: '';
						width: 100%;
						height: 2rpx;
						background-color: #efeff5;
					}
					.left {
						color: blue;
						font-weight: 700;
					}
					.center {
						display: flex;
						flex-direction: column;
						.top {
							font-weight: 700;
							font-size: 33rpx;
						}
						.bottom {
							display: flex;
							gap: 20rpx;
							font-size: 28rpx;
							.name {
								
							}
							.phone {
								
							}
						}
					}
					.right {
						
					}
				}
			
				
				&>.address-item:last-child {
					&::after {
						display: none;
					}
				}
			
			}
		}
		
	}
	
	
</style>